<template>
  <div class="app-container">
    <div class="u-flex u-flex-wrap">
      <div class="u-flex u-m-l-20 u-m-b-20">
        <div class="u-m-r-10 u-font-12">订单状态：</div>
        <el-select v-model="queryData.status" placeholder="请选择">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="u-flex u-m-l-20 u-m-b-20">
        <div class="u-m-r-10 u-font-12">支付渠道：</div>
        <el-select v-model="queryData.payType" placeholder="请选择">
          <el-option
            v-for="item in payType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="u-flex u-m-l-20 u-m-b-20">
        <div class="u-m-r-10 u-font-12" style="line-height: 30px; width: 100px">
          货柜地点：
        </div>
        <el-input v-model="queryData.location" class="select-input1" placeholder="请输入货柜地点" clearable />
      </div>
      <div class="u-flex u-m-l-20 u-m-b-20">
        <div class="u-m-r-10 u-font-12" style="line-height: 30px; width: 100px">
          下单时间：
        </div>
        <el-date-picker
          v-model="queryData.time"
          type="datetimerange"
          range-separator="至"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
			<div class="u-flex u-m-l-20 u-m-b-20">
        <el-button type="primary" @click="hanleSearch('')">查询</el-button>
      </div>
      <div class="u-flex u-m-l-20 u-m-b-20">
        <el-button @click="hanleSearch('reset')">重置</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="list" border style="width: 100%">
      <el-table-column prop="order_id" label="订单号" min-width="200" />
      <el-table-column label="支付渠道" min-width="200">
        <template slot-scope="scope">
          <div>{{ getText('payType', scope.row.pay_type) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="goodsName" label="售出商品" min-width="200"></el-table-column>
      <el-table-column prop="marchine_id" label="成交货柜" min-width="200"></el-table-column>
      <el-table-column prop="order_price" label="成交金额" min-width="200"></el-table-column>
      <el-table-column prop="location" label="货柜地点" min-width="200"></el-table-column>
      <el-table-column prop="pay_time" label="下单时间" min-width="200"></el-table-column>
      <el-table-column label="订单状态" min-width="200">
        <template slot-scope="scope">
          <div>{{ getText('status', scope.row.status) }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="u-flex u-row-center u-m-t-10">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pagination.pageSize"
        layout="prev, pager, next"
        :total="pagination.total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { orderList, deleteGoods } from "@/api/user";
export default {
  data() {
    return {
      list: [],
      loading: false,
      currentPage: 1,
      queryData: {
        name: "",
        status: "",
        payType: "",
        location: "",
        time: ""
      },
      pagination: {
        pageSize: 10,
        pageIndex: 1,
        total: 1
      },
      // 1：待支付，2已经支付，3订单执行中，4订单已经成功完成，5订单已经异常完成， 6订单退款中，7订单退款完成， 7订单退款失败
      // 支付方式ZF 支付宝 WX 微信 YL 银行 EC数字人民币
      payType: [
        {label: '全部', value: ''},
        {label: '支付宝', value: 'ZF'},
        {label: '微信', value: 'WX'},
        {label: '银联', value: 'YL'},
        {label: '数字人民币', value: 'EC'}
      ],
      status: [
        {label: '全部', value: ''},
        {label: '待支付', value: 1},
        {label: '已支付', value: 2},
        {label: '订单执行中', value: 3},
        {label: '已完成', value: 4},
        {label: '订单异常', value: 5},
        {label: '退款中', value: 6},
        {label: '退款完成', value: 7},
        {label: '退款失败', value: 8}
      ]
    };
  },
  created() {
    this.getList();
  },
  computed: {
    // currentPage: {
    //   get() {
    //     return this.queryData.pageIndex + 1;
    //   },
    //   set() {},
    // },
  },
  methods: {
    getList() {
      this.loading = true;
      let params = {}
      params.pageIndex = this.pagination.pageIndex
      for (const key in this.queryData) {
        if (this.isPropertyValueNotEmpty(this.queryData, key)) {
          if (key == 'time' && this.queryData.time.length) {
            params['startTime'] = this.queryData.time[0] 
            params['endTime'] = this.queryData.time[1] 
          } else {
            params[key] = this.queryData[key]
          }
        }
      }
      orderList(params).then((res) => {
        this.list = res.data.data;
        this.pagination.pageIndex = res.data.pageIndex
        this.pagination.total = res.data.total
        this.loading = false;
      });
    },
    hanleSearch(reset) {
			if (reset) {
				this.queryData.name = ''
				this.queryData.status = ''
				this.queryData.payType = ''
				this.queryData.location = ''
				this.queryData.time = ''
        this.currentPage = 1
        this.pagination.pageIndex = 1
			}
      this.getList();
    },
    handleCurrentChange(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    isPropertyValueNotEmpty(obj, property) {
      return obj.hasOwnProperty(property) && obj[property] !== null && obj[property] !== undefined && obj[property] !== '';
    },
    getText (name, val) {
      let obj = name === 'payType' ? this.payType : this.status
      let result = obj.filter(item => {
        return item.value === val
      })
      if (!result.length) return ''
      return result[0].label
    }
  },
}
</script>
<style scoped>
.success {
	color: #67C23A;
}
.Warning {
	color: #E6A23C;
}
</style>
